<template>
  <div class="container">
    <h1>Electron 多窗口示例</h1>

    <div class="">
      <v-btn prepend-icon="$vuetify" @click="openAbout"> Button </v-btn>

      <button @click="openModalWindow" class="btn btn-secondary text-red-400">打开模态窗口</button>

      <button @click="refreshWindowsList" class="btn btn-info">刷新窗口列表</button>
      <div class="text-red-500">123</div>
    </div>
    <div>{{ store.windowCount }}</div>
    <div class="windows-list" v-if="store.windowCount > 0">
      <h3>当前窗口:</h3>
      <ul>
        <li v-for="win in store.windows" :key="win.id" class="window-item">
          {{ win.title }} (ID: {{ win.id }}) - {{ win.type }}
          <button
            @click="closeWindow(win.id)"
            class="btn btn-danger btn-sm"
            :disabled="win.type === 'main'"
          >
            关闭
          </button>
        </li>
      </ul>
    </div>

    <div v-else class="no-windows">没有打开的窗口</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useWindowsStore } from '@/stores/windows'
import { toast } from '@/utils'

const store = useWindowsStore()

const openAbout = () => store.openRouteWindow('/about', '关于页面')

// 打开模态窗口
const openModalWindow = async () => {
  try {
    await window.electronAPI.openModalWindow({
      width: 500,
      height: 300,
      title: '模态窗口',
      modal: true,
    })
  } catch (error) {
    console.error('打开模态窗口失败:', error)
  }
}

// 组件挂载时获取窗口列表
onMounted(() => {
  console.log(store.windows)
})
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}
.btn-secondary {
  background-color: #6c757d;
  color: white;
}
.btn-success {
  background-color: #28a745;
  color: white;
}
.btn-info {
  background-color: #17a2b8;
  color: white;
}
.btn-danger {
  background-color: #dc3545;
  color: white;
}
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.btn:hover {
  opacity: 0.8;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.windows-list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
}

.window-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.window-item:last-child {
  border-bottom: none;
}

.no-windows {
  text-align: center;
  color: #666;
  font-style: italic;
  margin: 20px 0;
}
</style>
